import {Component, ReactNode} from 'react';
import React from 'react';
import {connect} from 'umi';
import HighPerformCardList from '@/components/HighPerformCardList';
// import KeywordFilterSearch from "@/components/KeywordFilterSearch";
import APIS from '@/apis';
import {Button, Input, Modal, message} from 'antd';
import KeywordFilterSpecial from '../../../components/KeywordFilterSpecial/index';
import {
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  PlusOutlined,
  ScheduleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  SendOutlined,
} from '@ant-design/icons';
import Const from '@/common/Const';

class CourseListPage extends Component<any> {
  actionRef?: HighPerformCardList<any>;

  requestGetData(current: number, pageSize: number) {
    const status = this.state.state;
    return APIS.CourseAPI.GetCourseList({current, pageSize, state: status});
  }

  state = {
    current: {id: -1},
    publishVisiable: false,
    content: '',
    state: -1
  };

  openNotice(item: any) {
    this.setState({publishVisiable: true, content: '', current: item});
  }

  setStateType(state: number) {
    this.actionRef?.clearData();
    this.setState({state});
    setTimeout(() => {
      this.actionRef?.getData(1);
    }, 100);
  }

  private changeBottom(item: any): ReactNode[] {

    // 0：禁用
    // 1：上线
    // 2：待提交审核
    // 3：审核中
    // 4：审核失败
    // 5：审核成功等待上线
    switch (item["state"]) {
      case -1:
        return [
          <EyeOutlined title="查看主页" key="setting" onClick={() => window.open(`/${Const.BASEDOMAINFRONT}/course?id=` + item.id)}/>,
          // <EyeOutlined title="查看主页" key="setting" onClick={() => window.open("/front/course?id=" + item.id)}/>,
          <EditOutlined
            title="编辑课程"
            key="edit"
            onClick={() =>
              this.props.history.push({pathname: 'create', search: 'id=' + item.id})
            }
          />,
          <ScheduleOutlined
            title="发布公告"
            key="publish"
            onClick={() => this.openNotice?.(item)}
          />,
          <DeleteOutlined
            title="删除课程"
            key="ellipsis"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "确认删除该课程", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => {
                  APIS.CourseAPI.DeleteCourse({id: item.id}).then(() => this.actionRef?.Reload());
                  console.log(item.id, this.state, this.props)
                }
              })
            }
            }
          />,
        ];
      case 0:
        return [
          <EyeOutlined title="查看主页" key="setting" onClick={() => window.open(`/${Const.BASEDOMAINFRONT}/course?id=` + item.id)}/>,
          // <EyeOutlined title="查看主页" key="setting" onClick={() => window.open("/front/course?id=" + item.id)}/>,
          <EditOutlined
            title="编辑课程"
            key="edit"
            onClick={() =>
              this.props.history.push({pathname: 'create', search: 'id=' + item.id})
            }
          />,
          <ScheduleOutlined
            title="发布公告"
            key="publish"
            onClick={() => this.openNotice?.(item)}
          />,
          <DeleteOutlined
            title="删除课程"
            key="ellipsis"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "确认删除该课程", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => {
                  APIS.CourseAPI.DeleteCourse({id: item.id}).then(() => this.actionRef?.Reload());
                  console.log(item.id, this.state, this.props)
                }
              })
            }
            }
          />,
        ];
      case 1:
        return [
          <EyeOutlined title="查看主页" key="setting" onClick={() => window.open(`/${Const.BASEDOMAINFRONT}/course?id=` + item.id)}/>,
          // <EyeOutlined title="查看主页" key="setting" onClick={() => window.open("/front/course?id=" + item.id)}/>,
          <EditOutlined
            title="编辑课程"
            key="edit"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "修改课程需要重新提交审核", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => {
                  this.props.history.push({pathname: 'create', search: 'id=' + item.id})
                }
              })

            }
            }
          />,
          <ScheduleOutlined
            title="发布公告"
            key="publish"
            onClick={() => this.openNotice?.(item)}
          />,
          <DeleteOutlined
            title="删除课程"
            key="ellipsis"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "确认删除该课程", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => {
                  APIS.CourseAPI.DeleteCourse({id: item.id}).then(() => this.actionRef?.Reload());
                  console.log(item.id, this.state, this.props)
                }
              })
            }
            }
          />,
        ];
      case 2:
        return [
          <EditOutlined
            title="编辑课程"
            key="edit"
            onClick={() =>
              this.props.history.push({pathname: 'create', search: 'id=' + item.id})
            }
          />,
          <CheckCircleOutlined
            title="提交"
            key="UpOut"
            onClick={() => {
              APIS.CourseAPI.SubmitCourse({id: item.id}).then((resp) => {
                if (resp.code === 10000) message.success("提交成功");
                this.actionRef?.Reload()
              })
            }}/>,
          <DeleteOutlined
            title="删除课程"
            key="ellipsis"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "确认删除该课程", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => APIS.CourseAPI.DeleteCourse({id: item.id}).then(() => this.actionRef?.Reload())
              })

            }

            }
          />,
        ];
      case 3:
        return [
          <EyeOutlined
            title="查看"
            key="Eye"
            onClick={() => {
              this.props.history.push({pathname: 'examine', search: 'id=' + item.id})
              console.log("查看")
            }
            }
          />,
          <CloseCircleOutlined
            title="取消审核"
            key="cancel"
            onClick={() => {
              APIS.CourseAPI.CancelCourse({id: item.id}).then((resp) => {
                if (resp.code === 10000) message.success("取消成功");
                this.actionRef?.Reload()
              })
            }}
          />
        ];
      case 4:
        return [
          <EditOutlined
            title="编辑课程"
            key="edit"
            onClick={() =>
              this.props.history.push({pathname: 'create', search: 'id=' + item.id})
            }
          />,
          <CheckCircleOutlined
            title="提交"
            key="UpOut"
            onClick={() => {
              APIS.CourseAPI.SubmitCourse({id: item.id}).then((resp) => {
                if (resp.code === 10000) message.success("提交成功");
                this.actionRef?.Reload()
              })
            }}/>,
          <DeleteOutlined
            title="删除课程"
            key="ellipsis"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "确认删除该课程", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => APIS.CourseAPI.DeleteCourse({id: item.id}).then(() => this.actionRef?.Reload())
              })
            }
            }
          />,
        ];
      case 5:
        return [
          <EditOutlined
            title="编辑课程"
            key="edit"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "修改课程需要重新提交审核", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => {
                  this.props.history.push({pathname: 'create', search: 'id=' + item.id})
                }
              })
            }

            }
          />,
          <SendOutlined
            title="上线"
            key="send"
            onClick={() => {
              APIS.CourseAPI.PublishCourse({id: item.id}).then((resp) => {
                if (resp.code === 10000) message.success("上线成功");
                this.actionRef?.Reload()
              })
            }}/>,
          <DeleteOutlined
            title="删除课程"
            key="ellipsis"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "确认删除该课程", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => APIS.CourseAPI.DeleteCourse({id: item.id}).then(() => this.actionRef?.Reload())
              })

            }

            }
          />,
        ];
      default:
        return [
          <EyeOutlined title="查看主页" key="setting" onClick={() => window.open(`/${Const.BASEDOMAINFRONT}/course?id=` + item.id)}/>,
          // <EyeOutlined title="查看主页" key="setting" onClick={() => window.open("/front/course?id=" + item.id)}/>,
          <EditOutlined
            title="编辑课程"
            key="edit"
            onClick={() =>
              this.props.history.push({pathname: 'create', search: 'id=' + item.id})
            }
          />,
          <ScheduleOutlined
            title="发布公告"
            key="publish"
            onClick={() => this.openNotice?.(item)}
          />,
          <DeleteOutlined
            title="删除课程"
            key="ellipsis"
            onClick={() => {
              const {confirm} = Modal;
              confirm({
                title: "确认删除该课程", okText: "确定", cancelText: "取消", onCancel: () => {
                }, onOk: () => APIS.CourseAPI.DeleteCourse({id: item.id}).then(() => this.actionRef?.Reload())
              })

            }

            }
          />,
        ];
    }
  }

  render() {
    return (
      <div>
        <KeywordFilterSpecial
          setType={this.setStateType.bind(this)}
          filters={[
            {title: '课程状态', multiple: false, keywords: ['全部', '禁用', '上线', '待提交审核', '审核中', '审核失败', '审核成功等待上线']},
          ]}
        />
        <HighPerformCardList
          ref={(ref: any) => (this.actionRef = ref)}
          requestGetData={this.requestGetData.bind(this)}
          profileType={0}
          dataIndexes={{image: 'courseImg', title: 'courseName', description: 'description'}}
          onClickUpdata={(data) =>
            this.props.history.push({pathname: 'create', search: 'id=' + data.id})
          }
          handleDelete={(id) => {
            return APIS.CourseAPI.DeleteCourse(id);
          }}
          toolBarRender={() => [
            <Button key={0} type="primary" onClick={() => this.props.history.push('create')}>
              <PlusOutlined/> 新建课程
            </Button>,
          ]}
          customActions={(item) => {
            return this.changeBottom(item)
          }}
        />
        <Modal
          bodyStyle={{height: '300px'}}
          onCancel={() => this.setState({publishVisiable: false})}
          title="发布公告"
          maskClosable
          visible={this.state.publishVisiable}
          okText="确定"
          cancelText="取消"
          onOk={() => {
            APIS.CourseAPI.CreateNotice({notice: this.state.content, courseId: this.state.current.id}).then(() => {
              this.setState({publishVisiable: false})
            })
          }}
          okButtonProps={{
            disabled: this.state.content.length < 10 && this.state.content.length > 100,
          }}
        >
          <Input.TextArea
            style={{height: '100%'}}
            value={this.state.content}
            onChange={(data) => this.setState({content: data.target.value})}
            maxLength={300}
            minLength={10}
            placeholder="请输入10到300字的公告内容"
          />
        </Modal>
      </div>
    );
  }
}

export default connect()(CourseListPage);
